<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<script type="text/javascript">
	/**
	 * web socket
	 */
	var WS = {
		connect : function() {
			var self = this;
			var ws = null;
			var serverUrl = "127.0.0.1:8889/order/12345";
			if ('WebSocket' in window) {
				ws = new WebSocket("ws://" + serverUrl);
			} else if ('MozWebSocket' in window) {
				ws = new MozWebSocket("ws://" + serverUrl);
			}
			if (!ws) {
				self.log('[系统提示]: 不能连接到服务器.');
				return;
			}
			ws.onopen = function() {
				self.log('[系统提示]: 已连接到服务器，会收到系统发送的消息.');
			};
			ws.onmessage = function(event) {
				self.log(event.data);
			};
			ws.onerror = function(evnt) {
				self.log(event.data);
			};
			ws.onclose = function(event) {
				self.log('[系统提示]: 连接已关闭.');
				self.ws = null;
			};
			this.ws = ws;
		},
		log : function(message) {
			console.log(message)
		},
		sendMessage : function(message) {
			if (this.ws) {
				this.ws.send(message);
			}
		},
	};
</script>
<style type="text/css">
.chart .chart-ops {
	display: flex;
}

.chart .chart-ops .input {
	flex: 1;
}

.chart .chart-ops  .send {
	display: block;
	padding: 3px 10px;
	background-color: blue;
	color: white;
	margin-left: 10px;
	cursor: pointer;
}
</style>
</head>
<body>
	<div class="chart">
		<div class="chart-messages"></div>
		<div class="chart-ops">
			<input id="message" name="message" class="input"><a
				class="send" href="javascript:doSend()">发送</a>
		</div>
	</div>
	<script type="text/javascript">
		// 连接服务器
		WS.connect();

		// 发送消息
		function doSend() {
			var message = document.getElementById('message').value;
			if (message) {
				WS.sendMessage(
		message);
			}
		}
	</script>
</body>
</html>